<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="200">
			<u-form-item label="姓名" prop="name" required>
				<u-input v-model="form.name" placeholder="请输入姓名" />
			</u-form-item>
			
			<u-form-item label="身份证号码" prop="id_card" required>
				<u-input v-model="form.id_card" placeholder="请输入18位身份证号码" />
			</u-form-item>
			
			<u-form-item label="性别" prop="gender" required>
				<u-radio-group v-model="form.gender">
					<u-radio name="男">男</u-radio>
					<u-radio name="女">女</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item label="联系电话" prop="phone" required>
				<u-input v-model="form.phone" placeholder="请输入联系电话" />
			</u-form-item>
			
			<u-form-item label="毕业时间" prop="graduation_date" required>
				<u-input 
					v-model="form.graduation_date" 
					placeholder="请选择毕业时间" 
					readonly
					@click="showGraduationCalendar = true"
				/>
			</u-form-item>
			
			<u-form-item label="毕业院校" prop="school" required>
				<u-input v-model="form.school" placeholder="请输入毕业院校" />
			</u-form-item>
			
			<u-form-item label="学历" prop="education" required>
				<u-input 
					v-model="form.education" 
					placeholder="请选择学历" 
					readonly
					@click="showEducationSelect = true"
				/>
			</u-form-item>
			
			<u-form-item label="就业企业" prop="company" required>
				<u-input v-model="form.company" placeholder="请输入就业企业名称" />
			</u-form-item>
			
			<u-form-item label="首次参保时间" prop="first_insurance_date" required>
				<u-input 
					v-model="form.first_insurance_date" 
					placeholder="请选择首次参保时间" 
					readonly
					@click="showFirstInsuranceCalendar = true"
				/>
			</u-form-item>
			
			<u-form-item label="企业地址" prop="company_address" required>
				<u-input v-model="form.company_address" placeholder="请输入企业地址" />
			</u-form-item>
			
			<u-form-item label="常住地址" prop="residential_address" required>
				<u-input v-model="form.residential_address" placeholder="请输入常住地址" />
			</u-form-item>
			
			<u-form-item label="劳动合同开始日期" prop="contract_start_date" required>
				<u-input 
					v-model="form.contract_start_date" 
					placeholder="请选择开始日期" 
					readonly
					@click="showContractStartCalendar = true"
				/>
			</u-form-item>
			
			<u-form-item label="劳动合同结束日期" prop="contract_end_date" required>
				<u-input 
					v-model="form.contract_end_date" 
					placeholder="请选择结束日期" 
					readonly
					@click="showContractEndCalendar = true"
				/>
			</u-form-item>
			
			<u-form-item label="补贴时间" prop="subsidy_date" required>
				<u-input 
					v-model="form.subsidy_date" 
					placeholder="请选择补贴时间" 
					readonly
					@click="showSubsidyCalendar = true"
				/>
			</u-form-item>
			
			<u-form-item label="申请补贴次数" prop="subsidy_count" required>
				<u-number-box v-model="form.subsidy_count" :min="1" :max="12" />
			</u-form-item>
			
			<u-form-item label="补贴标准" prop="subsidy_standard" required>
				<u-input v-model="form.subsidy_standard" placeholder="请输入补贴标准" />
			</u-form-item>
			
			<u-form-item label="补贴金额" prop="subsidy_amount" required>
				<u-input v-model="form.subsidy_amount" placeholder="请输入补贴金额" type="number" />
			</u-form-item>
			
			<u-form-item label="开户银行" prop="bank_name" required>
				<u-input v-model="form.bank_name" placeholder="请输入开户银行" />
			</u-form-item>
			
			<u-form-item label="银行账号" prop="bank_account" required>
				<u-input v-model="form.bank_account" placeholder="请输入银行账号" />
			</u-form-item>
		</u-form>
		
		<!-- 毕业时间日历 -->
		<u-calendar 
			v-model="showGraduationCalendar" 
			mode="date" 
			@change="onGraduationDateChange"
		></u-calendar>
		
		<!-- 首次参保时间日历 -->
		<u-calendar 
			v-model="showFirstInsuranceCalendar" 
			mode="date" 
			@change="onFirstInsuranceDateChange"
		></u-calendar>
		
		<!-- 劳动合同开始日期日历 -->
		<u-calendar 
			v-model="showContractStartCalendar" 
			mode="date" 
			@change="onContractStartDateChange"
		></u-calendar>
		
		<!-- 劳动合同结束日期日历 -->
		<u-calendar 
			v-model="showContractEndCalendar" 
			mode="date" 
			@change="onContractEndDateChange"
		></u-calendar>
		
		<!-- 补贴时间日历 -->
		<u-calendar 
			v-model="showSubsidyCalendar" 
			mode="date" 
			@change="onSubsidyDateChange"
		></u-calendar>
		
		<!-- 学历选择器 -->
		<u-select 
			v-model="showEducationSelect" 
			mode="single-column" 
			:list="educationList" 
			@confirm="onEducationConfirm"
		></u-select>
		
		<!-- 底部固定提交按钮 -->
		<view class="submit-section">
			<u-button type="primary" @click="submitForm" :loading="submitting">提交申请</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
				id_card: '',
				gender: '',
				phone: '',
				graduation_date: '',
				school: '',
				education: '',
				company: '',
				first_insurance_date: '',
				company_address: '',
				residential_address: '',
				contract_start_date: '',
				contract_end_date: '',
				subsidy_date: '',
				subsidy_count: 1,
				subsidy_standard: '',
				subsidy_amount: '',
				bank_name: '',
				bank_account: ''
			},
			rules: {
				name: [{
					required: true,
					message: '请输入姓名',
					trigger: ['blur', 'change']
				}],
				id_card: [{
					required: true,
					message: '请输入身份证号码',
					trigger: ['blur', 'change']
				}],
				gender: [{
					required: true,
					message: '请选择性别',
					trigger: ['blur', 'change']
				}],
				phone: [{
					required: true,
					message: '请输入联系电话',
					trigger: ['blur', 'change']
				}],
				graduation_date: [{
					required: true,
					message: '请选择毕业时间',
					trigger: ['blur', 'change']
				}],
				school: [{
					required: true,
					message: '请输入毕业院校',
					trigger: ['blur', 'change']
				}],
				education: [{
					required: true,
					message: '请选择学历',
					trigger: ['blur', 'change']
				}],
				company: [{
					required: true,
					message: '请输入就业企业',
					trigger: ['blur', 'change']
				}],
				first_insurance_date: [{
					required: true,
					message: '请选择首次参保时间',
					trigger: ['blur', 'change']
				}],
				company_address: [{
					required: true,
					message: '请输入企业地址',
					trigger: ['blur', 'change']
				}],
				residential_address: [{
					required: true,
					message: '请输入常住地址',
					trigger: ['blur', 'change']
				}],
				contract_start_date: [{
					required: true,
					message: '请选择劳动合同开始日期',
					trigger: ['blur', 'change']
				}],
				contract_end_date: [{
					required: true,
					message: '请选择劳动合同结束日期',
					trigger: ['blur', 'change']
				}],
				subsidy_date: [{
					required: true,
					message: '请选择补贴时间',
					trigger: ['blur', 'change']
				}],
				subsidy_count: [{
					required: true,
					message: '请输入申请补贴次数',
					trigger: ['blur', 'change']
				}],
				subsidy_standard: [{
					required: true,
					message: '请输入补贴标准',
					trigger: ['blur', 'change']
				}],
				subsidy_amount: [{
					required: true,
					message: '请输入补贴金额',
					trigger: ['blur', 'change']
				}],
				bank_name: [{
					required: true,
					message: '请输入开户银行',
					trigger: ['blur', 'change']
				}],
				bank_account: [{
					required: true,
					message: '请输入银行账号',
					trigger: ['blur', 'change']
				}]
			},
			showGraduationCalendar: false,
			showFirstInsuranceCalendar: false,
			showContractStartCalendar: false,
			showContractEndCalendar: false,
			showSubsidyCalendar: false,
			showEducationSelect: false,
			educationList: [
				{ label: '高中', value: '高中' },
				{ label: '中专', value: '中专' },
				{ label: '大专', value: '大专' },
				{ label: '本科', value: '本科' },
				{ label: '硕士', value: '硕士' },
				{ label: '博士', value: '博士' }
			],
			submitting: false
		}
	},
	methods: {
		// 毕业时间选择确认
		onGraduationDateChange(e) {
			this.form.graduation_date = e.result;
			this.showGraduationCalendar = false;
		},
		
		// 首次参保时间选择确认
		onFirstInsuranceDateChange(e) {
			this.form.first_insurance_date = e.result;
			this.showFirstInsuranceCalendar = false;
		},
		
		// 劳动合同开始日期选择确认
		onContractStartDateChange(e) {
			this.form.contract_start_date = e.result;
			this.showContractStartCalendar = false;
		},
		
		// 劳动合同结束日期选择确认
		onContractEndDateChange(e) {
			this.form.contract_end_date = e.result;
			this.showContractEndCalendar = false;
		},
		
		// 补贴时间选择确认
		onSubsidyDateChange(e) {
			this.form.subsidy_date = e.result;
			this.showSubsidyCalendar = false;
		},
		
		// 学历选择确认
		onEducationConfirm(e) {
			this.form.education = e[0].value;
			this.showEducationSelect = false;
		},
		
		// 提交表单
		async submitForm() {
			try {
				// 表单验证
				const valid = await this.$refs.uForm.validate();
				if (!valid) {
					return;
				}
				
				// 显示加载提示
				uni.showLoading({
					title: '提交中...'
				});
				
				// 调用创建API
				await this.$api.employmentSubsidyCreate(this.form);
				
				uni.hideLoading();
				
				uni.showToast({
						title: '提交成功',
						icon: 'success'
					});
					
					// 重置表单
					this.$refs.uForm.resetFields();
					
					// 延迟返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				
			} catch (error) {
				console.log(error);
			}
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	padding-bottom: 120rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.submit-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	z-index: 999;
}
</style>
